<template>
  <div class="cell-btn xh-list">
    <search :auto-fixed="false"
            v-model="searchText"
            @on-submit="getResult"
            placeholder="请输入项目名称查找"></search>
    <group v-for="(item,index) in getResult"
           :key="index"
           class="group-main">
      <cell :link="{path:'/demos/public-msg-z-m-detail',query:{PublicMsgGUID:item.PublicMsgGUID}}">
        
        <div slot="title"
             class="head cell-desc">{{item.MsgTitle}}</div>
        <div slot="inline-desc"
             class="div-desc">
          <span class="cell-desc">所属公司:&nbsp;{{item.BUName}}</span>
          <span class="cell-desc">发布日期:&nbsp;{{formatDate(item.PublishDate)}}</span>
          <div :class="item.DateClass">有效期至:&nbsp;{{formatDate(item.EffectDate)}}</div>
          <div v-show="item.isImg" class="badge-overdue"></div>
        </div>
      </cell>
    </group>
  </div>
</template>

<script>
import { Search, Tab, TabItem, Group, Cell, XButton, dateFormat } from 'vux'
import { PublicMsgZMService } from '../../service/Services.js'
import _ from 'lodash'
import Utils from '../../utils/utils.js'

export default {
  name: 'CellBtn',
  components: {
    Search,
    Tab,
    TabItem,
    Group,
    Cell,
    XButton
  },
  data () {
    return {
      searchText: '',
      pageData: []
    }
  },
  methods: {
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      PublicMsgZMService.getPublicMsgZM().then((res) => {
        this.$vux.loading.hide()
        this.pageData = res.Data
        for (var i = 0; i < this.pageData.length; i++) {
          this.pageData[i].isImg = false
          this.pageData[i].DateClass = 'div-date-over'
          if (this.formatDate(this.pageData[i].EffectDate) < Utils.dateFormat(new Date(), 'yyyy-MM-dd')) {
            this.pageData[i].DateClass = 'div-date'
            this.pageData[i].isImg = true
          }
        }
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    formatDate (myDate) {
      var msec = myDate.match(/\d+[+]\d+/gi)
      return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
    }
  },
  computed: {
    getResult () {
      return _.filter(this.pageData, item => { return item.MsgTitle.indexOf(this.searchText) !== -1 })
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style scoped lang="less">
.cell-main {
  margin-top: 10px;
}

.cell-desc {
  display: block;
  margin: 5px 0px;
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

.div-date {
  border-top: 0.5px dashed #E4E4E4;
  margin: 15px 0 0 0;
  padding-top: 10px;
}

.div-date-over {
  color: #DC220B;
  border-top: 0.5px dashed #E4E4E4;
  margin: 15px 0 0 0;
  padding-top: 10px;
}

.div-desc {
  color: #7F7F7F;
}

.badge-overdue {
  background-image: url(../../assets/img/badge-overdue.png);
  display: block;
  width: 34px;
  height: 33px;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
}

.head {
  font-weight: bold;
  font-size: 19px;
  color: #111111;
}
</style>
